import { createApp } from 'vue';
import { styled } from '@styils/vue';

const MsgItemDiv = styled('div', {
    position: 'fixed',
    margin: '0 auto',
    padding: '0 1rem',
    height: '2rem',
    top: '1rem',
    left: '50%',
    border: '1px solid #61bc84',
    borderRadius: '0.25rem',
    backgroundColor: '#c6ffe6',
    lineHeight: '2rem',
    textAlign: 'center',
    color: 'black',
    fontSize: '1rem',
    transform: 'translate(-50%)',
});

const MsgItem = {
    props: { msg: { type: String, required: true } },
    render({ $props }) {
        return (
            <MsgItemDiv>{$props.msg}</MsgItemDiv>
        );
    }
};

export const MessageBox = function ({ msg }) {
    const container = document.createDocumentFragment();
    const app = createApp(MsgItem, { msg });
    app.mount(container);
    document.body.appendChild(container);
    setTimeout(() => {
        app.unmount();
    }, 3000);
};